<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理后台主界面</title>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        <!--根据提供的数据, 动态的创建展示数据的表格-->
        function createTable(data) {
            var table = document.createElement('table');
            var thead = document.createElement('thead');
            var tbody = document.createElement('tbody');
            //设置表格边框
            table.style.border = '1px solid black';

            //表头
            var theadTr = document.createElement('tr');
            theadTr.style.border = '1px solid black';
            for (var key in data[0]) {
                var th = document.createElement('th');
                th.style.border = '1px solid black';
                //把遍历到的对象的字段名内容，作为列标题填入到标题行
                th.appendChild(document.createTextNode(key));
                theadTr.appendChild(th);
            }
            thead.appendChild(theadTr);
            table.appendChild(thead);

            //根据数据的个数动态的创建表格数据
            data.forEach(function (item) {
                var tr = document.createElement('tr');
                for (var key in item) {
                    var td = document.createElement('td');
                    td.style.border = '1px solid black';
                    td.appendChild(document.createTextNode(item[key]));
                    tr.appendChild(td);
                }
                tbody.appendChild(tr);
            });
            table.append(tbody);
            return table;
        }

        <!--发起一个请求获取列表数据-->
        var config = {
            method: "GET",
            url: "/product?method=allList",
            async: true,
            dataType: "json",
            success: function (resp) {
                //返回的结果
                console.log(resp);
                if (resp.code === 2001) {
                    //调用创建表格的函数，传入数据
                    var tb = createTable(resp.repo);//通过resp.repo获取返回的列表数据
                    var divShow = document.getElementById("show_table");
                    divShow.appendChild(tb);
                } else if (resp.code === 2002) {
                    alert(resp.msg);
                }
            }
        }
        $.ajax(config);
    </script>
</head>
<body>
<!--创建一个表格，把所有的库存产品信息列在该页面中-->
<h1>产品仓库管理后台</h1>
<div id="show_table"></div>
<a href="add.html">新增入库</a>
<a href="remove.html">删除库存</a>
</body>
</html>